<template>
	<view>
		<search-header :backgroundColor="backgroundColor"></search-header>
		<view class="banner">
			<view class="banner_box" :style="'background-color: ' + backgroundColor"></view>
			<swiper class="swiper" @change="swiperChange" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper_item" v-for="(item,index) in banner" :key="index">
					<image src="/static/lunbo.png" class="swiper_image" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="only">
			<view class="only_title">
				<text>{{pageval[2]}}</text>
			</view>
			<view class="only_pics">
				<image :src="pageval[0]" @tap="goVip" mode=""></image>
				<image :src="pageval[1]" @tap="goScore" mode=""></image>
			</view>
		</view> -->
		<view class="only">
			<view class="onlybox">
				<image src="/static/img/bkzg1.png" mode=""></image>
				<view class="">
					爆款直购
				</view>
			</view>
			<view class="onlybox">
				<image src="/static/img/bkzg2.png" mode=""></image>
				<view class="">
					爆款直购
				</view>
			</view>
			<view class="onlybox">
				<image src="/static/img/bkzg3.png" mode=""></image>
				<view class="">
					爆款直购
				</view>
			</view>
			<view class="onlybox">
				<image src="/static/img/bkzg4.png" mode=""></image>
				<view class="">
					爆款直购
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="goods_title">
				<image src="../../static/z1660.png" mode=""></image>
				<text>猜你喜欢</text>
				<image src="../../static/z1660.png" mode=""></image>
			</view>
		</view>
		<view class="box" @click="shopgo">
			<image src="/static/img/lbt.png" mode=""></image>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						红色皮革简约迷你斜挎包/轻奢时尚品牌新款真皮女包手袋单肩
					</view>
					<image src="../../static/img/xiaofx.png" mode=""></image>
					<view class="box1-1-title1">
						分享
					</view>
				</view>
				<view class="box1-2">
					<view class="box1-2box">
						<view class="box1-2text">
							￥1200
						</view>
						<view class="box1-2text1">
							￥3390
						</view>
					</view>
					<view class="box1-2box1">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<image src="/static/img/lbt.png" mode=""></image>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						红色皮革简约迷你斜挎包/轻奢时尚品牌新款真皮女包手袋单肩
					</view>
					<image src="../../static/img/xiaofx.png" mode=""></image>
					<view class="box1-1-title1">
						分享
					</view>
				</view>
				<view class="box1-2">
					<view class="box1-2box">
						<view class="box1-2text">
							￥1200
						</view>
						<view class="box1-2text1">
							￥3390
						</view>
					</view>
					<view class="box1-2box1">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<!-- <view class="goodsbox">
			<view class="goodsbox_item" v-for="(item,index) in goodsList" :key="index">
				<Good :good="item"></Good>
			</view>
		</view> -->
		<tabbar :selected="1"></tabbar>
		<Login></Login>
	</view>
</template>

<script>
	import SearchHeader from "@/components/SearchHeader/SearchHeader.vue"
	import Good from '@/components/Good/Good.vue'
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				backgroundColor: "rgb(172, 104, 83)",
				banner: [
					'/static/lunbo.pug'
				],
				pageval: [],
				video: '',
				videopic: '',
				goodsList: [{
						thumb: "/static/g1.jpeg",
						title: "盖朗德空气炸锅家用",
						price: "1185",
						oldprice: "1999.00",
						desc: "盖朗德空气炸锅家用4L大容量智能电炸锅 无油低脂煎炸 触控智能 多功能"
					},
					{
						thumb: "/static/g2.jpg",
						title: "京屋Q5顶配版按摩椅 全新升级24项技术 按摩椅中的爱马仕",
						price: "12888",
						oldprice: "38800.00",
						desc: "京屋Q5顶配版按摩椅 全新升级24项技术 按摩椅中的爱马仕"
					},
					{
						thumb: "/static/g1.jpeg",
						title: "盖朗德空气炸锅家用4L大容量智能电炸锅 无油低脂煎炸 触控智能 多功能",
						price: "1185",
						oldprice: "1999.00",
						desc: "盖朗德空气炸锅家用4L大容量智能电炸锅 无油低脂煎炸 触控智能 多功能"
					},
					{
						thumb: "/static/g2.jpg",
						title: "京屋Q5顶配版按摩椅 全新升级24项技术 按摩椅中的爱马仕",
						price: "12888",
						oldprice: "38800.00",
						desc: "京屋Q5顶配版按摩椅 全新升级24项技术 按摩椅中的爱马仕"
					}
				]
			}
		},
		onLoad(options) {
			var that = this;
			var ua = window.navigator.userAgent.toLowerCase()
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				var openid = window.localStorage.getItem('wxopenid');
				if (!openid && !options.wxopenid) {
					uni.showLoading({
						title: '加载中...'
					})
					that.$http('api/getopenidurl', {}, function(res) {
						uni.hideLoading();
						if (res.code === 0) {
							location.href = res.data.jumpurl;
						}
					})
					return false;
				}
				if (options.wxopenid) {
					//window.localStorage.setItem('wxopenid',options.wxopenid);
				}
			}

			// if(uni.getStorageSync('token')&&!options.puid){
			// 	that.$http('center/getuser',{},function(res){
			// 		var url = location.href;
			// 		var urlarr = url.split('?');
			// 		url = urlarr[0]+'?puid='+res.data.uid;
			// 		location.href = url;
			// 	})
			// }
			if (!uni.getStorageSync('token') && options.puid) {
				uni.setStorageSync('puid', options.puid);
			}
			this.getindex();

		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			shopgo() {
				uni.navigateTo({
					url: '/pages/shop/shoplive'
				})
			},
			getconfig() {
				var that = this;
				that.$http('api/getwechatconfig', {
					url: location.href
				}, function(res) {
					if (res.code === 0) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: res.data.jsApiList // 必填，需要使用的 JS 接口列表
						});
						that.sharedata = res.data.sharedata;

						jweixin.ready(function() {
							var token = uni.getStorageSync('token');
							if (!token) {
								jweixin.hideAllNonBaseMenuItem();
							} else {
								jweixin.updateAppMessageShareData({
									title: that.sharedata.title, // 分享标题
									desc: that.sharedata.desc, // 分享描述
									link: that.sharedata
										.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
									imgUrl: that.sharedata.imgUrl, // 分享图标
									success: function(e) {
										// 设置成功
										console.log(e, 111)
									}
								})
								jweixin.updateTimelineShareData({
									title: that.sharedata.title, // 分享标题
									link: that.sharedata
										.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
									imgUrl: that.sharedata.imgUrl, // 分享图标
									success: function() {
										// 设置成功
									}
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},

			getindex() {
				var url = 'api/getindex'
				var that = this;
				that.$http(url, {}, function(res) {
					var banner = res.data.banner;
					if (banner) {
						that.backgroundColor = banner[0]['color'];
						// that.banner = banner;
					} else {
						that.banner = [];
					}
					that.pageval = res.data.pageval;
					that.goodsList = res.data.goodslist;
					that.video = res.data.video;
					that.videopic = res.data.videopic;
					that.getconfig()
				})
			},
			swiperChange(e) {
				// this.backgroundColor = this.banner[e.detail.current]['backgroundColor']
				this.backgroundColor = this.banner[e.detail.current]['color']
			},
			goVip() {
				this.$common.navigateTo({}, "/pages/vipgoods/index")
			},
			goScore() {
				// uni.navigateTo({
				// 	url:"/pages/shop/index"
				// })
				uni.switchTab({
					url: "/pages/searchResult/index"
				})
				// this.$common.navigateTo({},"/pages/searchResult/index")
			}
		},
		components: {
			SearchHeader,
			Good
		}
	}
</script>

<style lang="scss">
	.banner {
		width: 100%;
		height: 380upx;
		position: relative;

		&_box {
			width: 100%;
			height: 90%;
			background: linear-gradient(90deg, #FF492B 0%, #FF4140 100%);
			border-radius: 0px 0px 0px 70px;
			opacity: 1;
		}

		.swiper {
			// width: 686upx;
			// height: 380upx;
			width: 100vw;
			height: 420rpx;
			box-sizing: border-box;
			padding-top: 20upx;
			margin: 0 auto;
			position: absolute;
			top: 0;
			// left: 32upx;

			&_item {
				width: 100%;
				height: 100%;
				border-radius: 20upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}
			}

		}
	}

	.only {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.onlybox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		>image {
			width: 106rpx;
			height: 106rpx;
		}

		>view {
			font-size: 24rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #404040;
			line-height: 58rpx;
		}
	}

	.only_title {
		width: 686upx;
		height: 88upx;
		background-image: url('@/static/bg1.png');
		background-repeat: no-repeat;
		background-size: 686upx 88upx;
		margin: 20upx auto;
		display: flex;
		align-items: center;
		justify-content: center;

		>text {
			color: #000;
			font-size: 30upx;
			font-weight: bold;
		}
	}

	.only_pics {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>image {
			width: 337upx;
			height: 220upx;
			border-radius: 10upx;
		}
	}

	.goods_title {
		width: 686upx;
		height: 88upx;

		background-repeat: no-repeat;
		background-size: 686upx 88upx;
		margin: 20upx auto;
		display: flex;
		align-items: center;
		justify-content: center;

		>image {
			width: 52rpx;
			height: 18rpx;
		}

		>text {
			margin: 0 12rpx;
			color: #000;
			font-size: 30upx;
			font-weight: bold;
		}
	}

	.goodsbox {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&_item {
			margin-bottom: 20upx;
		}
	}

	.box {
		width: 686rpx;
		margin: 0 auto;
		margin-bottom: 32rpx;
		background: #FFFFFF;
		box-shadow: -7px -7px 20px 1px rgba(0, 0, 0, 0.08);

		>image {
			width: 686rpx;
			height: 346rpx;
		}

		.box1 {
			margin: 0 auto;
			width: 656rpx;


			.box1-1 {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.box1-1-title {
					width: 524rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 40rpx;
				}

				.box1-1-title1 {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FF4140;
					line-height: 28rpx;
					// letter-spacing: 160rpx;
				}

				>image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.box1-2 {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 0;

				.box1-2box {
					display: flex;

					.box1-2text {
						font-size: 32rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #FF0C04;
						line-height: 62rpx;
					}

					.box1-2text1 {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #A8A8A8;
						line-height: 60rpx;
						text-decoration: line-through
					}
				}

				.box1-2box1 {
					width: 138rpx;
					height: 50rpx;
					background: #FFFFFF;
					border-radius: 20px 20px 20px 20px;
					opacity: 1;
					border: 1px solid #FF4140;

					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					text-align: center;
					color: #FF4140;
					line-height: 50rpx;
				}
			}
		}
	}
</style>
